【20年品牌建站】找北京网站建设新利官方网站就选新鸿儒/提供北京网站建设报价/北京网站制作/北京网站设计/网站开发、北京网站建设新利官方网站电话【010-51267718】有优惠哦!
简体
繁体 简体
我们的服务遍布中国

我们的服务遍布中国
乃至世界

新鸿儒所服务的品牌地域与城市
北京 天津 上海 广州 深圳 香港 厦门 江苏 浙江 山东
重庆 长沙 武汉 成都 西安 宁夏 丽江 青海 云南 乌鲁木齐
黑龙江 内蒙古 河北 ...
新鸿儒服务与合作的全球各地
美国 加拿大 德国 法国 英国 瑞士 意大利 荷兰
印度 日本 韩国 ...

不论你的品牌在何处
我们都可以提供完善的服务与帮助

致电

010-51267718

Web标准网站建设的一些思考

发布时间:2013-11-23 浏览:181打印字号:

  1、对于web标准和W3C XHTML规范的理解

  按照习惯的理解,这两个概念似乎都是指的一个东西(就是咱们在这个版里讨论的这些个"高深理论“^_^)。但我们认为,事实上从技术的角度上讲, 这两个事物几乎没有任何相关性。web标准简而言之就是将页面的结构、表现和行为各自独立实现,更通俗的讲就是如今招聘时流行的语言”div+css"。 但W3C XHTML的任何一个版本都没有对web标准理念作限制。很显然的,我们可以用xhtml 1.1写出一个table定位的网页。说到这里,或许会认为我们讲了一堆废话。但任何一项技术,只有当你对基础概念有足够清晰的认识的时候,你才会正确的使 用它。我们从下面两个方面,来谈谈如今Web标准应用走向的两个歧途:

  第一种情况很简单。自以为只要使用了XHTML+CSS就是Web标准了。页面里面遍地是class和id。肆意的为每个细节都单独定义 class。这样的页面和传统的html的区别就是img标签里多了个"/"。事实上这样子还不如回到传统的html,至少我们可以轻松的使用font,而 不用总是跟查字典一样去查样式表。另一种更隐蔽的随意使用CSS的我们在以后讲。

  第二种情况我们觉得比较难理解一些,即试图用各种纷繁复杂的div嵌套和css语句来实现你所想要的表现。很简单的一个例子就在我们刚看到的一个帖 子" 不用切图的页面圆角"。首先我们想肯定的是这个创意确实很不错,使用CSS功能将圆角“画”出来。为此,设计者必须在相应的位置加上一大段如下的代码:
  
  

  但是,这里严重违反了Web标准的基本概念——结构与表现要分离。因为它将用于控制网页表现的代码放在结构文档中了。或许你会说它事实上还是将 真正的表现代码放在CSS里的。但我们认为这是一个偷换概念。因为以上这些b标签跟网页结构无关,它们都是一些空标签。也就是说,它的存在并不是为了将某些 内容放在文档结构需要的位置。因此它们对于文档结构来说只是一些废代码。

  另外一个例子可能更加隐蔽。之前我们有在alistapart.com上看到过如何实现网页三通栏的文章,其原理大概就是使用三四个div相互嵌 套。我们认为这也是一个违反Web标准思想的做法。因为这些div标签在代码中摆放的次序已经不单纯是为了结构的需要,而是用于网页的表现。

  当然,我们承认,以上的观点在一定程度是钻牛角尖(但反过来说,非要实现非图片圆角不也是在钻牛角尖么,呵呵)。有些时候结构和表现并不是那么轻 易的就能分开的,我们为了实现一些丰富的表现不得不让结构去迁就(想想

的用处)。但是知道什么是对什么是错是很重要的。即使我们有时候不得不做一些错事。


  最后,我们想声明的是,我们并不是"非图片圆角"是无意义或是错误的。我们也很佩服作者的聪明和灵感。我们觉得这样的技术研究就如同以前用CSS画国旗 一样,对CSS技术的熟练掌握很有帮助。但是,它的用途也应该仅和CSS国旗一样局限,不应该在实际应用中采纳。因为它违反Web标准的基本原则。

  2、HTML标签的语义

  如今Web标准都被通俗的叫做“div+css”或者“层布局”。我们不反对这种便宜行事的叫法。但是这样会陷入一个误区:即大量的使用div标签作为结构元素。事实上这是一种更高级的div滥用(Jeffrey Zeldman在《网站重构》一书中提到)。

  HTML为我们提供了相当丰富的标签,每个标签都有它各自的含义。我们认为在设计时,除了遵循HTML语法以外,应该充分利用并遵守各标签的“语 义”。如标题文字应该包含在h1-h6中,大段的文字内容应该由

进行分段而不是
,列表项应该放在ul或ol或dl中,表格形式的数据应该仍然用table布局。

  为什么要这样做?一个很有说服力的原因是,保证在用户去掉CSS显示的情况下,网页能够尽量有效的将内容的结构层次显示出来。如果全部用div,当去掉CSS之后,整个网页就失去了层次,只剩下一些杂乱的文字碎片。这并不符合Web标准对低配置兼容性的要求。

  我们下面详细的列举一下我们对一些标签的语义的理解:

  p br

  先说个最简单的。分段要用p标签而不是用br(甚至连续两个
)。这个似乎不用多说。但是有时候我们不得不放弃这个原则。一个常见的例子是论坛发帖,如果我们想分段,便打回车。而如此传输到后台并显示出来 的,显然就是用
分段的。

  table th

  由于大力宣扬div+css的结果,似乎现在谁用table布局谁就是未开化的土著。但我们认为这种观点是不正确的。table的含义是表格,因 此凡是应该以表格形式出现的数据,仍然应该用table布局。简单的例子是班级同学的花名册,包括姓名学号性别等等,这明显是一个表格形式的数据,因此应 该用table布局。另一个比较值得探讨的例子是,blog里面的日历导航。我们曾经有见过一个blog程序,它的日历导航里的各个日期,从1号到30号全 用div套好,再使用float:left样式7个一排的排出当月的日历。当我们取消浏览器的CSS显示之后,日历的那部分则从1号到30号一竖排下来。我们 认为这是不对的。因为日历应该是一个表格形式的数据,因此仍然应该用table布局。当取消css之后,应该仍然按照一排7个的样子归成一个表格。

  th则是另一个会被忽视的标签。由于CSS的万能,所有的表格单元都可以用td加一个class属性搞定。但是从语义上讲,一些表格单元应该用 th标签。比如上文说到的日历表格,里面的“MON TUE /WED... SUN”这些标识星期的单元,就应该用th而不是td。

 

现在就与新鸿儒客服交流

010-51267718

您也可进行在线咨询或预约项目顾问
我要预约
在线咨询